<template>
  <div class="app-container">
    <el-card>
      <div class="top_info">
        <span class="title">数据概况</span>
        <span class="new_time" style="margin-left: 15px">更新时间：{{ refreshDate }}</span>
        <i class="el-icon-refresh" style="margin: 0 10px; cursor: pointer" @click="handleRefresh" />
        <svg-icon :icon-class="isOpenEyes ? 'eye-open' : 'eye'" @click="handleEye" />
      </div>
      <el-row class="echartsTop">
        <el-col :span="12" class="brandList">
          <div style="margin-left: 20px">
            <div class="textClass">总扫描次数</div>
            <div class="numClass">
              {{ isOpenEyes ? overviewTotal.totalScanNum || 0 : '****' }}
            </div>
            <div class="yesterdayClass">
              昨日: {{ isOpenEyes ? overviewTotal.yesterdayScanNum || 0 : '****' }}
            </div>
          </div>
          <div style="margin-left: 20px">
            <div class="textClass">查看总人数</div>
            <div class="numClass">
              {{ isOpenEyes ? overviewTotal.totalVisitUserNum || 0 : '****' }}
            </div>
            <div class="yesterdayClass">
              昨日: {{ isOpenEyes ? overviewTotal.yesterdayVisitUserNum || 0 : '****' }}
            </div>
          </div>
          <div style="margin-left: 20px">
            <div class="textClass">拉新总人数</div>
            <div class="numClass">
              {{ isOpenEyes ? overviewTotal.totalRegisterUserNum || 0 : '****' }}
            </div>
            <div class="yesterdayClass">
              昨日: {{ isOpenEyes ? overviewTotal.yesterdayRegisterUserNum || 0 : '****' }}
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="videoInfo">
          <el-image
            v-if="overviewTotal.qrcodeUrl"
            style="width: 118px; height: 127px; margin-bottom: 5px"
            :preview-src-list="[overviewTotal.qrcodeUrl]"
            :src="overviewTotal.qrcodeUrl"
          />
          <div class="videoInfo-name">
            <span class="tips" style="font-size: 14px; text-align: center; font-weight: bold">{{
              overviewTotal.name
            }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt-20">
      <line-chart
        ref="viewTrend"
        className="viewTrend"
        :title="title"
        :legend="legend"
        :color="color"
        :grid="grid"
        :yAxis="yAxis"
        :xAxis="xAxis"
        :series-data="seriesData"
      />
    </el-card>
    <el-card class="mt-20">
      <div class="title mb-20">二维码查看人数</div>
      <search-form
        v-model="formOption.data"
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        label-width="100px"
      />

      <page-table
        :loading="loading"
        :data="dataSource"
        :columns="column"
        :options="options"
        @selectChange="handleSelectionChange"
      />
      <pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="handleList"
      />
    </el-card>
  </div>
</template>

<script>
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { headerData, filterData } from './export'
export default {
  name: 'sceneCodeData',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      loading: false,
      dataSource: [],
      isSelectList: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      options: {
        select: true,
        border: false,
        index: false
      },
      isOpenEyes: true,
      refreshDate: '',
      overviewTotal: {},
      formOption: {
        data: {
          isRegisterUser: '',
          registerTime: [],
          scanTime: []
        },
        items: [
          {
            type: 'select',
            label: '会员状态',
            value: 'isRegisterUser',
            style: 'width: 210px',
            selectList: [
              { label: '拉新会员', value: true },
              { label: '老会员', value: false }
            ]
          },
          {
            type: 'daterange',
            label: '注册时间',
            value: 'registerTime',
            valueFormat: 'yyyy-MM-dd'
          },
          {
            type: 'daterange',
            label: '扫描时间',
            value: 'scanTime',
            valueFormat: 'yyyy-MM-dd'
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.handleList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = { isRegisterUser: '', registerTime: [], scanTime: [] }
            this.handleList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.handleExport()
          }
        }
      ],
      title: {
        text: '二维码查看走势图（近一个月）'
      },
      color: ['#68BBC4', '#7AA3EF'],
      legend: {
        data: ['查看人数', '新注册人数']
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      seriesData: [],
      id: '',
      sceneUrl: '',
      sceneName: ''
    }
  },
  computed: {
    column() {
      return [
        {
          prop: 'id',
          label: 'ID',
          width: 100
        },
        {
          prop: 'avatar',
          label: '会员信息',
          width: 200,
          render: (h, { row }) => {
            return (
              <div>
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-start',
                    marginLeft: '30px'
                  }}
                >
                  <el-image
                    style={{
                      width: '45px',
                      border: '1px solid #f7f8fa',
                      height: '45px',
                      marginRight: '5px'
                    }}
                    src={row.avatar}
                    fit="cover"
                  >
                    <div slot="error" class="image-slot">
                      <div>暂无头像</div>
                    </div>
                  </el-image>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'flex-start',
                      marginLeft: '10px'
                    }}
                  >
                    <div>{row.nickname}</div>
                    <div>{row.mobile}</div>
                    {row.qrcodeBehaviorType == 2 ? (
                      <div
                        style={{
                          padding: '0px 10px',
                          backgroundColor: 'red',
                          color: '#fff'
                        }}
                      >
                        新
                      </div>
                    ) : (
                      ''
                    )}
                  </div>
                </div>
              </div>
            )
          }
        },
        {
          prop: 'address',
          label: '所属地区'
        },
        {
          prop: 'scanTime',
          label: '最新扫描时间'
        },
        {
          prop: 'registerTime',
          label: '会员注册时间'
        }
      ]
    }
  },

  created() {
    const { id, sceneUrl, sceneName } = this.$route.query
    if (id) this.id = id
    if (sceneUrl) this.sceneUrl = sceneUrl
    if (sceneName) this.sceneName = sceneName
    this.handleDataOverview()
    this.handleList()
    this.handleTime()
  },
  methods: {
    //获取数据概况
    async handleDataOverview() {
      const { data } = await this.$http.sceneCode.detailStatistics(this.id).catch(err => err)
      console.log(data)
      this.overviewTotal = data

      this.xAxis.data = this.overviewTotal.chartData.map(item => item.date) || []
      this.seriesData = [
        {
          name: '查看人数',
          type: 'line',
          symbol: 'circle',
          data: this.overviewTotal.chartData.map(item => item.visitUserNum || 0)
        },
        {
          name: '新注册人数',
          type: 'line',
          symbol: 'circle',
          data: this.overviewTotal.chartData.map(item => item.registerUserNum || 0)
        }
      ]
    },
    //刷新
    handleRefresh() {
      const first = this.handleTime()
      const second = this.handleDataOverview()
      Promise.all([first, second]).then(() => {})
      this.$message.success('刷新成功')
    },

    //是否可视
    handleEye() {
      this.isOpenEyes = !this.isOpenEyes
    },

    //获取列表
    async handleList() {
      const params = {
        qrcodeId: this.id,
        ...this.listQuery
      }
      const { isRegisterUser, registerTime, scanTime } = this.formOption.data
      params.isRegisterUser = isRegisterUser

      if (registerTime.length) {
        params.registerStartTime = registerTime[0]
        params.registerEndTime = registerTime[1]
      }

      if (scanTime.length) {
        params.scanStartTime = scanTime[0]
        params.scanEndTime = scanTime[1]
      }

      const { data } = await this.$http.sceneCode.detailList({ params })
      // console.log('获取列表', res)
      this.total = data.total
      this.dataSource = data.records
    },

    //获取选择的数据
    handleSelectionChange(val) {
      this.isSelectList = val
    },

    qrcodeStoreLevel(value) {
      const obj = {
        0: '无',
        1: '代言合伙人',
        2: '城市合伙人'
      }
      return obj[value]
    },

    //导出数据
    handleExport() {
      if (!this.isSelectList.length) return this.$message.error('请选择要导出的数据')

      const obj = {
        0: '无',
        1: '代言合伙人',
        2: '城市合伙人'
      }
      let selectList = []
      const list = this.$lodash.cloneDeep(this.isSelectList)

      list.forEach(el => {
        selectList.push({
          id: el.id,
          nickname: el.nickname,
          mobile: el.mobile,
          address: el.address || '暂无',
          qrcodeStoreName: el.qrcodeStoreName || '暂无',
          qrcodeStoreLevel: obj[el.qrcodeStoreLevel] || '暂无',
          qrcodeStorePhone: el.qrcodeStorePhone,
          registerStoreName: el.registerStoreName,
          scanTime: el.scanTime,
          registerTime: el.registerTime
        })
      })

      // 构建导出的数据
      const tableData = selectList.map(el => filterData.map(it => (it = el[it])))
      console.log(tableData)
      export_json_to_excel(headerData, tableData, '会员列表')
    },

    /**
     * 获取更新时间
     */
    handleTime() {
      var myDate = new Date()
      let r = myDate.toJSON().slice(0, 10)
      let h = myDate.getHours()
      let m = myDate.getMinutes()
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      this.refreshDate = `${r} ${h}:${m}`
    }
  }
}
</script>
<style lang="scss">
.tipClass {
  margin-left: 5px;
  display: inline-block;
  width: 20px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #fc4541;
  background-color: #fc4541;
  color: #fff;
  border-radius: 3px;
}
</style>
<style lang="scss" scoped>
.title {
  font-weight: bold;
}

.new_time {
  font-size: 14px;
}

.echartsTop {
  margin-top: 40px;
  display: flex;
  flex-direction: row;

  .brandList {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .splice-line {
      border-right: 1px solid rgb(240, 242, 245);
      width: 1px;
      height: 70px;
    }

    .textClass {
      font-size: 16px;
    }

    .numClass {
      font-size: 28px;
      font-weight: bold;
      margin: 10px 0;
      text-align: center;
    }

    .yesterdayClass {
      font-size: 16px;
      text-align: center;
    }
  }

  .videoInfo {
    display: flex;
    flex-direction: column;
    margin-top: -50px;
    align-items: center;
    justify-content: center;
    padding-left: 100px;

    div {
      margin-top: 8px;
    }

    .videoInfo-name {
      display: flex;
      flex-direction: row;

      span {
        width: 100px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
